<template>
  <div class="channel-edit">
    <!-- 我的频道----------------------------->
    <van-cell :border="false" title="我的频道">
      <!-- 标题 -->
      <van-button
        @click="isEdit = !isEdit"
        class="edit-btn"
        type="danger"
        plain
        round
        size="mini"
      >
        {{ isEdit ? "完成" : "编辑" }}
      </van-button>
    </van-cell>
    <!-- 我的频道 - 宫格显示 频道项目 -->
    <van-grid class="my-grid" :gutter="10">
      <!-- 宫格项<van-icon name="clear" /> -->
      <van-grid-item
        v-for="(v, i) in usrChanList"
        :class="{ redFont: i === index }"
        :key="v.id"
        class="grid-item"
        :text="v.name"
        :icon="getClearIcon(v)"
        @click="clickChannel(v, i)"
      />
    </van-grid>

    <!-- 推荐频道---------------------------- -->
    <van-cell title="频道推荐" :border="false">
      <!-- 标题 -->
    </van-cell>
    <!-- 推荐频道 - 宫格显示 频道项目 -->
    <van-grid class="recommend-grid" :gutter="10">
      <!-- 宫格项 -->
      <van-grid-item
        @click="addChan(v, i)"
        v-for="(v, i) in recommendChanList"
        :key="v.id"
        class="grid-item"
        :text="v.name"
      />
    </van-grid>
  </div>
</template>

<script>
import {
  getAllChannels,
  addUsrChannel,
  removeUsrChannel,
} from "@/api/channels.js";
// 导入vuex的映射属性方法
import { mapState } from "vuex";
import { setItem } from "@/utils/storage.js";

export default {
  name: "channel-edit",
  props: ["usrChanList", "index"], // 我的频道
  data() {
    return {
      // 我的频道编辑状态
      isEdit: false,
      // 推荐频道数组
      recommendChanList: [],
      // 白名单频道数组
      whiteList: [0, 2],
    };
  },
  async created() {
    console.log(this.index);
    // 请求获取所有频道列表
    let { data: resBody } = await getAllChannels();
    const allChannel = resBody.data.channels;
    // console.log(allChannel);
    this.recommendChanList = allChannel.filter(
      (a) => !this.usrChanList.some((b) => a.id === b.id)
    );

    // allChannel.forEach((a) => {
    //   // a不在用户频道中，则将它加到推荐频道列表
    //   if (!this.usrChanList.some((b) => b.id === a.id)) {
    //     this.recommendChanList.push(a);
    //   }
    // });
    console.log(allChannel.length);
    console.log(this.usrChanList.length);
    console.log(this.recommendChanList.length);
  },
  methods: {
    // 将我的频道添加到用户频道
    async addChan(curChannels, i) {
      this.recommendChanList.splice(i, 1);
      this.usrChanList.push(curChannels);
      try {
        // 如果登录了
        if (this.user) {
          let res = await addUsrChannel({
            id: curChannels.id,
            seq: this.usrChanList.length,
          });
          console.log(res);
        } else {
          // 如果未登录
          setItem(this.$conf.USER_CHAN, this.usrChanList);
        }
      } catch (err) {
        console.log("出错啦", err.message);
        this.$toast.fail("sorry,服务器繁忙");
      }
    },
    // getClearIcon
    getClearIcon(curChannel) {
      if (this.isEdit && !this.whiteList.some((cid) => cid === curChannel.id)) {
        return "clear";
      }
      return "";
    },
    async clickChannel(curChannel, i) {
      // 判断是否为编辑状态
      if (this.isEdit) {
        // 如果被点击的频道在白名单中，则不可以移除
        if (this.whiteList.some((cid) => cid === curChannel.id)) return;

        // 如果是编辑状态，则进行频道移除操作
        this.usrChanList.splice(i, 1);
        this.recommendChanList.push(curChannel);
        this.recommendChanList.sort((x, y) => x.id - y.id);
        if (this.user) {
          try {
            await removeUsrChannel(curChannel.id);
          } catch (error) {
            this.$toast.fail("服务器繁忙，请稍后再试");
          }
        } else {
          console.log("未登录");
          setItem(this.$conf.USER_CHAN, this.usrChanList);
        }
      } else {
        this.$emit("changeTab", i);
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 87px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .redFont .van-grid-item__text {
    color: red !important;
  }
  /deep/ .my-grid {
    .van-icon-clear {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 15px;
      color: #cacaca;
      z-index: 2;
    }
  }
  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f3f5f7;
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0px;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>